<template>
  <div class="head-view-container">
    <n-flex class="head-flex-container">
      <img alt="Vue logo" class="logo" src="@/assets/svg/meiden_logo.svg" width="30" height="30" />
      <n-flex class="right-elements" justify="end">
        <n-button class="head-element" @click="requestFullScreen">全屏</n-button>
        <div class="switch-container">
          <n-switch v-model:value="inverted" class="head-element" />
        </div>
        <n-tag class="head-element">{{inverted?"Dark":"Light"}}</n-tag>
        <n-dropdown trigger="hover" :options="options" @select="handleSelect" class="head-element">
          <n-button>{{props.username}}</n-button>
        </n-dropdown>
      </n-flex>
    </n-flex>
  </div>
</template>

<script setup>
import { NTag, NSwitch, NButton, NFlex, NDropdown, useMessage } from "naive-ui";
import { ref } from "vue";
import { useRouter } from "vue-router";

// 定义props，接收username
const props = defineProps({
  username: {
    type: String,
    default: 'admin001'
  }
});

const router = useRouter();
const inverted = ref(false);
const message = useMessage();
const options = [
  {
    label: "个人信息",
    key: "userinfo",

  },
  {
    label: "退出登录",
    key: "outlogin",
  },
  {
    label: "注销用户",
    key: "deletelogin",
    disabled: true,
  },
];

function handleSelect(key) {
  if (key === 'outlogin') {
    // 清除localStorage中的用户名
    localStorage.removeItem('username');
    // 清除cookie中的token
    document.cookie = 'access_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
    // 跳转到登录页
    router.push('/login');
    message.info('已成功注销登录');
  } else {
    message.info(String(key));
  }
}

function requestFullScreen() {
  let de = document.documentElement;
  if (de.requestFullscreen) {
    de.requestFullscreen();
  } else if (de.mozRequestFullScreen) {
    de.mozRequestFullScreen();
  } else if (de.webkitRequestFullScreen) {
    de.webkitRequestFullScreen();
  }
}
</script>

<style scoped>
.head-view-container {
  height: 100%;
  display: flex;
  align-items: center;
}

.head-flex-container {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}

.right-elements {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  margin-left: auto;
}

.head-element {
  height: 30px; /* 统一高度 */
  display: flex;
  align-items: center;
}

.switch-container {
  height: 30px;
  display: flex;
  align-items: center;
}

/* 确保n-button的高度一致 */
:deep(.n-button) {
  height: 30px !important;
  padding: 0 12px;
}

/* 确保n-tag的高度一致 */
:deep(.n-tag) {
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 8px;
}

/* 确保n-switch的高度一致 */
:deep(.n-switch) {
  height: 30px;
  display: flex;
  align-items: center;
}
</style>
